<template>
  <div :class="styles['signature']">
    <CodeScannerBar title="签收快递" @scanner="codeChange"/>
    <hr class="ato-mt-16 ato-mb-16"/>
    <div class="ato-flex-jc-end">
      <UidSearchBar tips="输入销售订单UID或发货物流单号，可搜索已发货订单信息：">
        <el-form inline :model="searchForm" style="margin-top: 6px">
          <el-form-item label="物流单号:">
            <el-input v-model="searchForm.trackingNo" placeholder="物流单号" clearable style="width: 200px"/>
          </el-form-item>
          <el-form-item label="送卡订单UID:">
            <el-input v-model="searchForm.orderNo" placeholder="送卡订单UID" clearable style="width: 200px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="handleSearch(true)">重置</el-button>
          </el-form-item>
        </el-form>
      </UidSearchBar>
    </div>
    <h2 class="ato-title ato-mb-12">快递签收列表:</h2>
    <EnterStoreList :wms-status="1" ref="enterStoreListRef"/>
  </div>
</template>

<script setup name="Signature">
import {reactive, ref} from 'vue'
import { ElNotification, ElMessage } from 'element-plus'
import { CodeScannerBar, UidSearchBar, EnterStoreList } from '@/components'
import { addInOrderApi } from '@/service/enterStore'

// 搜索表单
const searchForm = reactive({
  trackingNo: '',
  orderNo: ''
})

// 列表组件
const enterStoreListRef = ref(null)

// 快递单号扫描监听
async function codeChange (code) {
  const _ElNotification = ElNotification({
    message: `${code}订单匹配中,请稍等...`,
    type: 'info',
    duration: 0,
    showClose: true
  })
  const res = await addInOrderApi({ trackingNo: code })
  if (res.success) {
    ElMessage.success(`${code}快递签收成功!`)
    enterStoreListRef.value.onLoad()
  } else {
    ElMessage.warning(code + res.msg)
  }
  _ElNotification.close()
}

// 搜索按钮
function handleSearch (isReset = false) {
  if (isReset) {
    searchForm.orderNo = ''
    searchForm.cardUID = ''
  }
  enterStoreListRef.value.onLoad({
    trackingNo: searchForm.trackingNo,
    orderNo: searchForm.orderNo
  })
}

</script>

<style lang="less" src="./index.less" module="styles"></style>
